<template>
  <div>
    <!-- 头部 -->
    <div class="w-header1">
      <div class="w-xhead1">
        <i @click="zhu()"></i>
        <span>兑换记录</span>
        <div class="handle">
            <em @click="qing()">清空</em><em class="xian"></em><em @click="bianji()">编辑</em>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="main" >
        <div class="mainW">
            <ul>
                <li v-for="(item,index) in arr" :key="index" >
                    <p class="mdata">{{item.dat}}</p>
                    <div class="mAa" v-for="(a1,ind) in item.obj" :key="ind" @click="change(ind)" >
                        <div class="tu"><i :class="{'mb1':!bol,'mb2':bol,'mb3':bolur2}" ></i><em :class="{'ma1':!bol,'ma2':bol}"></em></div>
                        <div class="mAa-in">
                            <div class="mCai">{{a1.tit}}</div>
                            <div class="mZhi"><i></i><em></em><span>{{a1.zhi}}</span> </div>
                            <div class="mMon"><span>500</span><i></i><em>￥{{a1.money}}</em> 
                            </div>
                            <span class="dui">已兑换</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 组件改名称 -->
        <wbgc v-show="bolur1">
            <div class="w-tan1">
                <div class="tan">
                    <div>确定要清空所有足迹？</div>
                    <div>
                        <span class="btn1" @click="quxiao()">取消</span>
                        <span class="btn2" @click="qingkong()">确定</span>
                    </div>
                </div>
            </div>
        </wbgc>
  </div>
</template>

<script>
// 创建组件
import Ald from '../Ald.vue';
export default {
    name:'Dengjilu',
    data(){
        return{
            bol:true,
            bolur1:false,
            bolur2:false,
            aa:[],
            arr:[  
                {
                    dat:'2017-07-03',
                    obj:[
                        {
                            tit:'焕彩萃璨花蕊唇彩4.8g',
                            zhi:'海外直邮',
                            money:166.06
                        }
                    ]
                
                }
                ,
                {

                    dat:'2017-07-03',
                    obj:[
                        {
                            tit:'焕彩萃璨花蕊唇彩4.8g',
                            zhi:'海外直邮',
                            money:166.06
                        },{
                            dat:'2017-07-03',
                            tit:'焕彩萃璨花蕊唇彩4.8g',
                            zhi:'海外直邮',
                            money:166.06
                        },{
                            dat:'2017-07-03',
                            tit:'焕彩萃璨花蕊唇彩4.8g',
                            zhi:'海外直邮',
                            money:166.06
                        }
                    ]
                
                }
                
            ]

        }
    },
    components:{
       'wbgc':Ald
    },
    methods:{
        change(ind){
            console.log(ind);
            if(this.bol==false){
                this.bol='';
                this.bolur2=!this.bolur2;
            }
            
        },
        //回到主页
        zhu(){
         this.$router.replace('/login');
        },
        bianji(){
            this.bol=!this.bol;
        },
        qing(){
            this.bolur1=!this.bolur1;
        },
        qingkong(){
            this.qing();
            this.arr=[];
        },
        quxiao(){
            this.bolur1=!this.bolur1;
        }
        
    }
}
</script>

<style scoped>
/* 遮罩 */
.w-tan1{
    width: calc(100% - 32rem);
    padding: 0 16rem;

}
.tan{
    width: calc(100% - 32rem);
    height: 25rem;
    background-color: #fff;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-12.5rem);
    z-index: 11;
}
.tan div:nth-child(1) {
   width:100%;
   height: 16.9rem;
   line-height: 16.9rem;
   color: #4c4c4c;
   font-size: 3rem;
}
.tan div:nth-child(2) {
    line-height: 8rem;
    height: 8rem;
    width: 100%;
    display: flex;
    border: 0.1rem solid #cccc;
    font-size: 2.8rem;
}
.tan div:nth-child(2) span{
    flex:1;
}
.tan div:nth-child(2) span:nth-child(1){
    border-right: 0.1rem solid #cccccc;
}
.btn1{
    color: #4c4c4c;
}
.btn2{
    color: #e53e42;
}
/* 内容 */
.main{
    padding-top: 9.6rem;
    font-size: 3rem;
}
.mainW {
    width: 100%;
    position: relative;
}
.mdata,.mCai{
    color: #4c4c4c;
    font-size: 2.8rem;
}
.mdata{
    width: calc(100% - 4rem);
    padding: 0 2rem;
    text-align: left;
    height: 6rem;
    line-height: 6rem;
    border-bottom: 0.1rem solid #ccc;
}
.mAa{
    height: 20rem;
    display: flex;
}
.mAa .tu{
    height: 20rem;
    width: 20rem;
    margin-left: 2rem;
    position: relative;
}
.mAa .tu .ma1{
    display: inline-block;
    height: 20rem;
    width: 20rem;
    background: url(../../assets/user/lipstick1.png) no-repeat 9rem 2.4rem;
}
.mAa .tu .mb1{
    display: inline-block;
    height: 3rem;
    width: 3rem;
    background: url(../../assets/user/g-gui.png) no-repeat -3.6rem 0;
    position: absolute;
    top: 50%;
    transform: translateY(-1.5rem);
}
.mAa .tu .mb3{
    display: inline-block;
    height: 3rem;
    width: 3rem;
    background: url(../../assets/user/g-gui.png) no-repeat 0 0;
    position: absolute;
    top: 50%;
    transform: translateY(-1.5rem);
}
.mAa .tu .ma2{
    display: inline-block;
    height: 20rem;
    width: 20rem;
    background: url(../../assets/user/lipstick1.png) no-repeat 6.5rem 2.2rem;
}
.mAa .tu .mb2{
   display: none;
}
.mAa .mAa-in{
    width: calc(100% - 20rem);
    text-align: left;
    height: 19.9rem;
    display: flex;
    flex-direction: column;
    border-bottom: 0.1rem solid #ccc;
    justify-content: space-evenly;
    position: relative;
}
.mAa .mAa-in div{
    padding-left: 2rem;
}

.mZhi{
    font-size: 2.4rem;
}
.mZhi i{
    display: inline-block;
    width: 3rem;
    height: 2rem;
    background: url(../../assets/user/ri.png) no-repeat 0 0;
    vertical-align: middle;
    padding-right: 1rem;
}
.mZhi em{
    display: inline-block;
    height: 3.6rem;
    width: 4rem;
    background: url(../../assets/user/g-che-fei.png) no-repeat -6rem 0;
    vertical-align: middle;
    padding-right: 0.6rem;
}
.dui{
    position: absolute;
    bottom: 2rem;
    right: 2.6rem;
    height: 4rem;
    width: 12rem;
    line-height: 4rem;
    text-align: center;
    background-color: #e53e42;
    border-radius: 4rem;
    color: #fff;
}
.mMon span{
    color: #e53e42;
    font-size: 3rem;
}
.mMon i{
    display: inline-block;
    height: 1.6rem;
    width: 2.4rem;
    position: relative;
    background: url(../../assets/user/user-deng.png) no-repeat 0 0;
    margin: 0 1.6rem 0 0.8rem;

}
.mMon em{
    font-size: 2.4rem;
    text-decoration: line-through;
    color: #808080;
}
/* 头部 */
.handle{
    width: 20rem;
    height: 9.6rem;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 3rem;

}
.handle em:nth-child(2){
    display: inline-block;
    height: 2.8rem;
    border-left: 0.1rem solid #fff;
    margin: 0 0.7rem;
    position: relative;
    top: 0.4rem;
}
</style>